import { ref, computed, watch } from 'vue'

export type ThemeMode = 'light' | 'dark' | 'auto'

const THEME_KEY = 'uc-theme'

export const useTheme = () => {
  // 简单的响应式主题模式
  const themeMode = ref<ThemeMode>('auto')

  // 在客户端初始化localStorage
  if (typeof window !== 'undefined') {
    const stored = localStorage.getItem(THEME_KEY) as ThemeMode
    if (stored && ['light', 'dark', 'auto'].includes(stored)) {
      themeMode.value = stored
    }
  }

  // 保存到localStorage
  const saveTheme = (mode: ThemeMode) => {
    if (typeof window !== 'undefined') {
      localStorage.setItem(THEME_KEY, mode)
    }
  }

  // 计算当前是否为暗黑模式
  const isDark = computed(() => {
    if (themeMode.value === 'auto') {
      // 检测系统主题偏好
      return window.matchMedia('(prefers-color-scheme: dark)').matches
    }
    return themeMode.value === 'dark'
  })

  // 切换主题
  const toggleTheme = () => {
    const modes: ThemeMode[] = ['light', 'dark', 'auto']
    const currentIndex = modes.indexOf(themeMode.value)
    const newMode = modes[(currentIndex + 1) % modes.length]
    themeMode.value = newMode
    saveTheme(newMode)
  }

  // 设置指定主题
  const setTheme = (mode: ThemeMode) => {
    themeMode.value = mode
    saveTheme(mode)
  }

  // 获取下一个主题模式
  const nextTheme = computed(() => {
    const modes: ThemeMode[] = ['light', 'dark', 'auto']
    const currentIndex = modes.indexOf(themeMode.value)
    return modes[(currentIndex + 1) % modes.length]
  })

  // 主题监听系统偏好变化
  const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')

  // 添加媒体查询监听器
  if (typeof window !== 'undefined') {
    mediaQuery.addEventListener('change', () => {
      if (themeMode.value === 'auto') {
        // 强制更新以触发响应式更新
        themeMode.value = themeMode.value
      }
    })
  }

  // 应用主题到DOM
  watch(isDark, (dark) => {
    if (typeof document !== 'undefined') {
      const html = document.documentElement

      if (dark) {
        html.classList.add('dark')
        html.setAttribute('data-theme', 'dark')
      } else {
        html.classList.remove('dark')
        html.setAttribute('data-theme', 'light')
      }
    }
  }, { immediate: true })

  // 主题样式变量
  const themeVariables = computed(() => ({
    '--uc-bg-primary': isDark.value ? '#1C1C1E' : '#FFFFFF',
    '--uc-bg-secondary': isDark.value ? '#2C2C2E' : '#F8F9FA',
    '--uc-bg-tertiary': isDark.value ? '#3A3A3C' : '#E9ECEF',
    '--uc-text-primary': isDark.value ? '#F2F2F7' : '#1D1D1F',
    '--uc-text-secondary': isDark.value ? '#A1A1AA' : '#48484A',
    '--uc-text-tertiary': isDark.value ? '#6B7280' : '#8E8E93',
    '--uc-border-primary': isDark.value ? '#38383A' : '#D1D5DB',
    '--uc-border-secondary': isDark.value ? '#48484A' : '#E5E7EB',
    '--uc-accent-primary': isDark.value ? '#0A84FF' : '#007AFF',
    '--uc-accent-secondary': isDark.value ? '#5E5CE6' : '#5856D6',
    '--uc-success': isDark.value ? '#30D158' : '#67C23A',
    '--uc-warning': isDark.value ? '#FF9F0A' : '#E6A23C',
    '--uc-error': isDark.value ? '#FF453A' : '#F56C6C',
    '--uc-shadow-sm': isDark.value ? '0 2px 8px rgba(0, 0, 0, 0.3)' : '0 1px 3px rgba(0, 0, 0, 0.1)',
    '--uc-shadow-md': isDark.value ? '0 4px 16px rgba(0, 0, 0, 0.4)' : '0 4px 12px rgba(0, 0, 0, 0.15)',
    '--uc-shadow-lg': isDark.value ? '0 8px 32px rgba(0, 0, 0, 0.5)' : '0 8px 24px rgba(0, 0, 0, 0.2)',
    '--uc-glass-primary': isDark.value ? 'glass-dark' : 'glass-light',
    '--uc-text-gradient-start': isDark.value ? '#F2F2F7' : '#1D1D1F',
    '--uc-text-gradient-end': isDark.value ? '#A1A1AA' : '#48484A'
  }))

  return {
    themeMode,
    isDark,
    nextTheme,
    toggleTheme,
    setTheme,
    themeVariables
  }
}